<template>
    <div class="user">

        <s-header></s-header>

        <side-bar></side-bar>

        <s-title :name="'我的账户'"></s-title>

        <div class="box">

            <div class="now_info">
                <div class="num">
                    <span class="left">管理员编号</span>
                    <span>1</span>
                </div>

                <div class="name">
                    <span class="left">账户名</span>
                    <span>admin</span>
                </div>
            </div>

            <div class="basic_info">
                <h3>基本信息</h3>
                <div class="nickname">
                    <label for="nickname_input" class="left">管理员昵称</label>
                    <input type="text" id="nickname_input" value="admin" disabled>
                </div>
            </div>

            <div class="op">
                <h3>管理员操作</h3>
                <div class="password">修改密码</div>
                <div class="logout">退出当前账号</div>
            </div>

        </div>
    </div>
</template>
  
  


<script setup>
import sHeader from '../components/SimpleHeader.vue'
import sideBar from '../components/SideBar.vue'
import sTitle from '../components/SimpleTitle.vue'
</script>




<style lang="less" scoped>
.box{
    position: fixed;
    top: 130px;
    left: 300px;
    margin-top: 10px;
    margin-left:40px;

    .left{
        // margin-left: 20px;
        width: 100px;
        display: inline-block;
    }
    .now_info{
        width: 90vw;
        height: 90px;
        border-bottom: 1px solid #cfcccc;
        
        .num{
            margin-left: 10px;
            height: 40px;
            line-height: 40px
        }
        .name{
            margin-left: 10px;
            height: 40px;
            line-height: 40px;
        }
    }

    .basic_info{
        height: 100px;
        border-bottom: 1px solid #cfcccc;
        margin-top: 20px;

        .nickname{
            margin-left: 10px;
            margin-top: 20px;
            height: 40px;
            line-height: 40px;

            input{
                background-color: #fff;
                border: 1px solid #dcdada;
                outline: none;
            }
        }
    }

    .op{
        margin-top: 20px;

        .password{
            margin-top: 10px;
            margin-left: 10px;
            color: #007BFF; /* 浅蓝色，类似于Bootstrap的链接颜色 */
            &:hover{
                text-decoration: underline; /* 鼠标悬停时添加下划线 */
                cursor: pointer; /* 显示为可点击的指针图标 */
            }
        }

        .logout{
            margin-top: 10px;
            margin-left: 10px;
            color: #007BFF; /* 浅蓝色，类似于Bootstrap的链接颜色 */
            &:hover{
                text-decoration: underline; /* 鼠标悬停时添加下划线 */
                cursor: pointer; /* 显示为可点击的指针图标 */
            }
        }
    }

}
</style>
